<template>
  <div class="front-main-content">
    <Card class="content-main station-main">
      <Table
        class="loading-hide-table"
        highlight-row
        :loading="false"
        :columns="columns"
        :data="data"
        @on-current-change="selectionChangeHandler"
      >
        <template slot-scope="{ row }" slot="name">
          <router-link :to="{ name: 'gunDetail', params: { pileId: row.equipmentid } }">{{ row.name }}</router-link>
          <!-- <span v-else>{{ row.name }}</span> -->
        </template>
        <template slot-scope="{ row }" slot="ischarging">
          <span :class="{ ischarging: row.ischarging == 0 }">{{ row.ischarging == 0 ? $t('KcSRXekyevBKgfFzK9_tb') : $t('0P9RF1EXCuEtRDWiziChz')}}</span>
        </template>

      </Table>
    </Card>
  </div>
</template>

<script>
// import moment from 'moment'
// import echarts from 'echarts'
import { getEquipmentlist, queryPileStatusList } from '@/api/data2'

export default {
  name: 'stationOverview',
  props: {
    id: {
      type: [String, Number]
    }
  },
  data () {
    return {
      loading: false,
      columns: [
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          width: 150,
          slot: 'name',
          fixed: 'left'
        },
        {
          title: this.$t('_U-ZtVG4JB3EY66WR98OJ'),
          width: 150,
          key: 'type'
        },
        {
          title: this.$t('Hj_cOkH4-CUmh2cXEEaYZ'),
          width: 150,
          key: 'guncount'
        },
        {
          title: this.$t('MVMkv_batpRoCwl-kdm4h'),
          width: 150,
          key: 'showstat',
          render: (h, params) => {
            const showstat = params.row.showstat
            let msg = '-'
            if (showstat == 0) {
              msg = this.$t('M7RZpV6k4XkkupcwAwxwg')
            } else if (showstat == 1) {
              msg = this.$t('0P9RF1EXCuEtRDWiziChz')
            } else if (showstat == 2) {
              msg = this.$t('RVCTbUrscq9OLbP_wxaoO')
            } else if (showstat == 3) {
              msg = this.$t('hnNk_bTR-vr_R-AV_4j3X')
            } else if (showstat == 4) {
              msg = this.$t('VxqoJAcw9kqCZWZpYaeog')
            }
            return h('span', msg)
          }
        },
        {
          title: this.$t('yA34-lUnahw6SVhVDODyA'),
          width: 150,
          key: 'listsoc'
        },
        {
          title: this.$t('ilBjnTHvH9FZJ10Ujr05w') + '(A)',
          width: 150,
          key: 'listcurrent'
        },
        {
          title: this.$t('CTsf5EDkHt6-fogPpJsVt') + '(°C)',
          width: 150,
          key: 'listguntemp'
        },
        {
          title: this.$t('Mjtbk_f7kxbjNYgJwyX2q') + '(kW)',
          width: 150,
          key: 'totalp'
        },
        {
          title: this.$t('_Rpg0m8CqYK1YlL2sDXYP') + '(kWh)',
          width: 150,
          key: 'totalmeter'
        },
        {
          title: this.$t('xNJjaNDTMwLjvRvzBHsfP'),
          width: 150,
          key: 'ver'
        },
        {
          title: this.$t('jrkZ2Urg4M1yD_4FI3wuo'),
          width: 150,
          key: 'devicetime'
        }
      ],
      data: [],
      queryFlag: true,
      equipmentid: []
    }
  },
  async mounted () {
    await this.queryInfo()
    await this.sleep()
    this.queryPilePolling()
  },
  methods: {
    sleep (time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, time || this.$config.intervalTime * 1000)
      })
    },
    async queryInfo () {
      this.loading = true
      const { code, data, desc } = await getEquipmentlist({
        stationid: this.id + ''
      })
      if (code == 200) {
        const equipInfo = data.datalist || []
        if (equipInfo.length) {
          this._origin = _.cloneDeep(equipInfo)
          const equipmentid = this.equipmentid = equipInfo.map(e => e.id)
          const { code, data, desc } = await queryPileStatusList({
            devicelist: equipmentid
          })
          if (code == 200) {
            const datalist = data.datalist || []
            const res = []
            equipInfo.forEach(e => {
              const pile = datalist.find(d => d.equipmentid == e.id)
              const obj = pile ? { ...pile, name: e.name, ver: e.ver } : {
                name: e.name,
                type: e.type,
                guncount: e.guncount,
                showstat: '-',
                listsoc: '-',
                listcurrent: '-',
                listguntemp: '-',
                totalp: '-',
                totalmeter: '-',
                ver: '-',
                systemtime: '-',
                equipmentid: e.id
                // 无法跳转的标志
                // disabledJump: true
              }
              res.push(obj)
            })
            // datalist.forEach(d => {
            //   const match = equipInfo.find(e => e.id == d.equipmentid)
            //   d.name = match ? match.name : ''
            // })
            this.data = res
          } else {
            this.$Message.error(desc)
          }
        }
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
      // await this.sleep(this.$config.intervalTime * 1000)
      // this.queryInfo()
    },
    async queryPilePolling () {
      if (!this.queryFlag) return
      this.loading = true
      if (this.equipmentid.length) {
        const { code, data, desc } = await queryPileStatusList({
          devicelist: this.equipmentid
        })
        if (code == 200) {
          const datalist = data.datalist || []
          const res = []
          const equipInfo = _.cloneDeep(this._origin)
          equipInfo.forEach(e => {
            const pile = datalist.find(d => d.equipmentid == e.id)
            const obj = pile ? { ...pile, name: e.name, ver: e.ver } : {
              name: e.name,
              type: e.type,
              guncount: e.guncount,
              showstat: '-',
              listsoc: '-',
              listcurrent: '-',
              listguntemp: '-',
              totalp: '-',
              totalmeter: '-',
              ver: '-',
              systemtime: '-',
              equipmentid: e.id
              // 无法跳转的标志
              // disabledJump: true
            }
            res.push(obj)
          })
          this.data = res
        } else {
          this.$Message.error(desc)
        }
        this.loading = false
        await this.sleep()
        this.queryPilePolling()
      }
    },
    selectionChangeHandler () {

    }
  },
  beforeDestroy () {
    this.queryFlag = false
  }
}
</script>

<style lang="stylus" scoped>
.loading-hide-table >>> .ivu-spin-fix
  width 40px
  height 40px
  background-color rgba(255, 255, 255, 0)
  border-width 0
</style>
